<template>
    <transition name="todo" appear>
        <li>
            <label>
                <input type="checkbox" :checked="todoObj.done " @change="handleCheck(todoObj.id)"/>
                <span v-show="!todoObj.isEdit">{{todoObj.title}}</span>
                <input
                        v-show="todoObj.isEdit"
                        type="text"
                        :value="todoObj.title"
                        @blur="handleBlur(todoObj,$event)"
                        ref="inputTitle"
                >
            </label>
            <button class="btn btn-danger" @click="deleteDone(todoObj.id)">删除</button>
            <button v-show="!todoObj.isEdit" class="btn btn-edit" @click="handleEdit(todoObj)">编辑</button>
        </li>
    </transition>

</template>

<script>
    import pubsub from 'pubsub-js'

    export default {
        name: "MyItem",
        //声名接受todoObj对象
        props: ['todoObj'],
        methods: {
            //删除
            deleteDone(id) {
                if (confirm('确定删除吗？')) {
                    // this.deleteTodo(id)
                    // this.$bus.$emit('deleteTodo',id)
                    pubsub.publish('deleteTodo', id)
                }
            },
            handleCheck(id) {
                // this.checkTodo(id)
                this.$bus.$emit('checkTodo', id)
            },
            //编辑
            handleEdit(todo) {
                // todo.isEdit=true
                if (todo.isEdit !== undefined) {
                    todo.isEdit = true
                } else {
                    this.$set(todo, 'isEdit', true)
                }
                //获取焦点的时候输入框还没有呢
                //在DOM更新完毕之后再执行
                this.$nextTick(function () {
                    this.$refs.inputTitle.focus()
                })


            },
            //失去焦点 真正修改逻辑
            handleBlur(todo, e) {
                todo.isEdit = false
                if (!e.target.value.trim())
                    return alert('输入不能为空!')
                this.$bus.$emit('upDateTodo', todo.id, e.target.value)
            }
        }

    }
</script>

<style scoped>
    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    /*控制按钮*/
    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    /*鼠标悬浮 高亮*/
    li:hover {
        background-color: #ddd;
    }

    /*鼠标悬浮 高亮*/
    li:hover button {
        /*高亮并显示*/
        display: block;
    }
    .todo-enter-active {
        animation: tyl 1s linear;
    }

    .todo-leave-active {
        animation: tyl 1s linear reverse;
    }


    @keyframes tyl {
        /*来*/
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0px);

        }
    }
</style>
